<template>
  <el-main>
    <el-row>
      {{spu.title}}
    </el-row>
    <el-table
        :data="skuList">
      <el-table-column
          prop="title"
          label="名称"
          width="480">
      </el-table-column>
      <el-table-column
          prop="price"
          label="价格"
          width="150">
      </el-table-column>
      <el-table-column
          prop="ownSpec"
          label="规格"
          width="240">
        <template slot-scope="scope">
          <span v-for="(v,k) in JSON.parse(scope.row.ownSpec)">{{v}}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="150">
        <template slot-scope="scope">
          <el-button @click="detail(scope.row.id)" type="text" size="small">加入购物车</el-button>
          <el-button type="text" size="small">下单</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row >
      <div v-html="spuDetail.description"></div>
    </el-row>


  </el-main>
</template>

<script>
export default {
  name: "ProuctDetail",
  data() {
    return {
      skuList:[],
      spu: null,
      spuDetail: null,
    }
  },
  methods: {
    detail: function (id) {
      this.axios.get('/cart/cart/add', {params: {productId: id}}).then(res => {
        this.$message.success('已加入购物车');
      });
    }

  },
  mounted() {
    let id = this.$route.params.id;
    console.log(id);
    if (id) {
      this.axios.get('product/spu/detail/' + id).then(res => {
        this.skuList = res.data.data.skuList;
        this.spu = res.data.data.spu;
        this.spuDetail = res.data.data.spuDetail;
      });
    }
  }
};
</script>

<style scoped>

</style>